<template>
  <view class="page">
    <view class="page-main">
      <scroll-view class="scrool-more" style="height: 100%" scroll-y="true" scroll-with-animation="true">
        <u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left">
          <u-form-item label="归属组" prop="groupId" label-width="180" required>
            <js-select v-model="model.groupId" :items="groupList" itemLabel="title" itemValue="id" placeholder="请选择归属组"
              :disabled="disabled"></js-select>
          </u-form-item>
          <u-form-item label="姓名" prop="userName" label-width="180" required count>
            <u-input placeholder="请输入姓名" v-model="model.userName" type="text" maxlength="64"
              :disabled="disabled"></u-input>
          </u-form-item>
          <u-form-item label="工号" prop="account" label-width="180" required count>
            <u-input placeholder="请输入工号" v-model="model.account" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="手机号" prop="phone" label-width="180" required count>
            <u-input placeholder="请输入手机号" v-model="model.phone" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="性别" prop="sex" label-width="180" required count>
            <js-radio v-model="model.sex" :items="sexItems" itemLabel="dictValue" itemValue="dictKey"
              :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="邮箱" prop="email" label-width="180">
            <u-input placeholder="请输入邮箱" v-model="model.email" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="用户生日" prop="birthday" label-width="180">
            <u-input placeholder="请输入用户生日" v-model="model.birthday" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="备用号码1" prop="phone1" label-width="180">
            <u-input placeholder="请输入备用号码1" v-model="model.phone1" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="备用号码2" prop="phone2" label-width="180">
            <u-input placeholder="请输入备用号码2" v-model="model.phone2" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="备用号码3" prop="phone3" label-width="180">
            <u-input placeholder="请输入备用号码3" v-model="model.phone3" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="备用号码4" prop="phone4" label-width="180">
            <u-input placeholder="请输入备用号码4" v-model="model.phone4" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="家庭地址" prop="address" label-width="180">
            <u-input placeholder="请输入家庭地址" v-model="model.address" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="职务" prop="post" label-width="180">
            <u-input placeholder="请输入职务" v-model="model.post" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="备注" prop="remark" label-width="180">
            <u-input placeholder="请输入备注" v-model="model.remark" type="text" maxlength="64" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="创建时间" prop="createTime" label-width="180" v-if="model.createTime!=null">
            {{model.createTime}}
          </u-form-item>
        </u-form>
      </scroll-view>
    </view>
    <view v-if="!disabled" class="page-footer">
      <view class="button" @click="submit">保存</view>
      <view class="button" @click="cancel">取消</view>
    </view>
    <view v-else class="page-footer">
      <view v-if="hasPermission('msgGroupUser_edit')" class="button" @click="disabled=false">编辑</view>
      <view v-if="hasPermission('msgGroupUser_delete')" class="button" @click="handleDelete">删除</view>
    </view>
    <!-- <view class="footer">
      <view v-if="!disabled" style="display: flex;flex-direction: row;">
        <u-button class="btn" style="width: 50%;margin-right: 10rpx;" type="primary" @click="submit">保存</u-button>
        <u-button class="btn" style="width: 50%;" @click="cancel">取消</u-button>
      </view>
      <view v-else style="display: flex;flex-direction: row;">
        <u-button type="primary" style="width: 50%;margin-right: 10rpx;" v-if="hasPermission('msgGroupUser_edit')"
          @click="disabled=false">编辑</u-button>
        <u-button icon="edit-pen" style="width: 50%;" type="error" v-if="hasPermission('msgGroupUser_delete')"
          @click="handleDelete">删除</u-button>
      </view>
    </view> -->
  </view>
</template>

<script>
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  export default {
    data() {
      return {
        model: {
          id: '',
          title: '',
          remindType: '',
          msgContent: '',
          sendTime: '',
          status: '0'
        },
        sexItems: [{
          dictKey: '男',
          dictValue: '男'
        }, {
          dictKey: '女',
          dictValue: '女'
        }],
        show: false,
        groupList: [],
        disabled: true,
        rules: {
          groupId: [{
            required: true,
            message: '选择归属组',
            trigger: ['change', 'blur'],
          }],
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: ['change', 'blur'],
          }],
          account: [{
            required: true,
            message: '请输入工号',
            trigger: ['change', 'blur'],
          }],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          }],
          sex: [{
            required: true,
            message: '请选择性别',
            trigger: ['change', 'blur'],
          }]
        },
      };
    },
    mounted() {},
    onLoad(params) {
      if (params.id) {
        this.$u.api.message.msgGroupUser.detail({
          id: params.id
        }).then(res => {
          Object.assign(this.model, res.data);
        });
      } else {
        this.disabled = false;
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
      this.$u.api.message.msgGroup.groupDict().then(res => {
        this.groupList = res.data;
      });
    },
    methods: {
      submit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            uni.showLoading({
              title: '提交中....'
            })
            this.$u.api.message.msgGroupUser.save(this.model).then(res => {
              uni.hideLoading();
              uni.showModal({
                title: '提示',
                content: res.msg,
                showCancel: false,
                success: function() {
                  if (res.code == 200) {
                    uni.navigateTo({
                      url: 'index'
                    });
                  }
                }
              });
            });
          } else {
            this.$u.toast('您填写的信息有误，请根据提示修正。');
          }
        });
      },
      cancel() {
        uni.navigateTo({
          url: 'index'
        });
      },
      handleDelete() {
        let self = this;
        uni.showModal({
          title: '提示',
          content: '确认要删除用户吗？',
          showCancel: true,
          success: function(res2) {
            if (res2.confirm) {
              self.$u.api.message.msgGroupUser.delete({
                ids: self.model.id
              }).then(res => {
                uni.navigateTo({
                  url: 'index'
                });
              });
            }
          }
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f7f7f7;
  }
  
  .page-main {
    flex: 1;
    overflow: hidden;
  }
  
  .page-footer {
    flex-shrink: 0;
    display: flex;
    padding: 24rpx;
    background: #f7f7f7;
  
    .button {
      flex: 1;
      height: 96rpx;
      border-radius: 96rpx;
      line-height: 96rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      background: #3989FC;
  
      &+.button {
        margin-left: 24rpx;
        color: #333;
        background: #fff;
      }
    }
  }
  
  .form {
    padding: 32rpx 24rpx;
  }
  
  .u-item-title {
    position: relative;
    margin-bottom: 32rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
  
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -24rpx;
      display: inline-block;
      width: 4rpx;
      height: 40rpx;
      border-radius: 0px 6rpx 6rpx 0px;
      background-color: #3989FC;
    }
  }
  
  .u-form-item {
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;
  
    &::after {
      display: none;
    }
  }
</style>